ab 


Mengenal Bahasa 
Pemrograman ASP.NET 


Di buku ini, Anda akan belajar bagaimana membuat website dan 
web page menggunakan Visual Web Developer tool yang termasuk 
bagian dari paket Microsoft Visual Studio 2010. Visual Web 
Developer memiliki look and feel seperti IDE (Integrated Deve- 
lopment Environment) dari Visual Studio 2010. 


Hanya saja layanan ini dikhususkan untuk web programming dan 
ASP.NET 4. Komponen-komponen yang ditampilkan dikhususkan 
untuk menyediakan fungsionalitas internet yang modern. 


Pada prinsipnya, pemrograman Windows dan pemrograman web 
hampir sama. Dengan Visual Basic 2010, Anda bisa membuat 
halaman web yang canggih walaupun pengetahuan HTML Anda 
pas-pasan. 


Menggunakan tool Visual Basic 2010 untuk membuat web, Anda 
bisa belajar membuat web dengan cepat dan bahkan aplikasi yang 
cukup kompleks. 


21 Pendahuluan ASP.NET 


ASP.NET 4 adalah platform web dari Microsoft yang sudah 
ditingkatkan fungsi dan fiturnya agar sesuai dengan tuntutan 
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browser modern. ASP.NET 4 sudah mengakomodasi fitur-fitur baru 
dari browser dan standar HTML terbaru yang belum ada di versi 
ASP.NET sebelumnya. 


Di antara perkembangan yang ada di ASP.NET adalah cara 
pembuatan web page menjadi lebih baik, di samping itu dukungan 
terhadap browser-browser baru yang sebelumnya belum ada. 





Gambar 2.1 Logo ASP.NET 


Ada ASP.NET Chart server control, kemudian ada peningkatan di 
elemen-elemen FormView, ListView, dan @ueryExtender. Ada data 
kontrol dinamis, dan peningkatan remote scripting menggunakan 
model pemrograman AJAX (Asynchronous JavaScript and XML). 


Walaupun ASP.NET memiliki banyak kesamaan dengan teknologi 
web programming sebelumnya, yakni ASP. Tapi ASP.NET sudah 
banyak mengalami peningkatan dibandingkan dengan ASP. 
ASP.NET pertama kali dirilis di Visual Studio Net 2002 dan terus 
berevolusi dengan menambahkan fitur-fitur baru yang ditam- 
bahkan di NET framework dan software Visual Studio. 


Visual Web Developer yang merupakan alat untuk membuat dan 
mengatur user interface dari ASP.Net juga dikembangkan. Dengan 
Visual Web Developer, Anda bisa membuat website yang menam- 
pilkan user interface, memproses data dan menyediakan banyak 
command dan fitur yang disediakan di aplikasi Windows standar. 


Website yang dikembangkan menggunakan ASP.NET 4 juga 
cocok dilihat hasilnya di berbagai browser baru, seperti Internet 
Explorer, Mozilla Firefox, Apple Safari, atau bahkan browser di 
peranti mobile seperti Google Chrome, BlackBerry smart phone, 
dan iPhone. 


Website-website yang dibuat nantinya disimpan di web server yang 
biasanya menggunakan software Microsoft Internet Information 
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Services (IIS). Server ini tugasnya menampilkan halaman web 
yang benar kemudian menghandel tugas komputasi yang diper- 
lukan oleh website. 


Di Visual Studio 2010, Web site dapat dijalankan di komputer lokal 
tanpa memerlukan IIS, sehingga proses pengembangan software 
menjadi lebih mudah dan fleksibel. Strategi terdistribusi ini me- 
mungkinkan website Anda dijalankan di banyak komputer, baik 
yang berbasis internet atau yang berdiri sendiri. 


Untuk membuat website, Anda dapat mengklik New Website di 
menu File kemudian memilih Visual Web Developer untuk mem- 
bangun satu atau beberapa web page yang bisa merepresen- 
tasikan website. 


Setiap webpage di Visual Basic selalu terdiri atas 2 bagian: 


e Sebuah web form yang mengandung HTML, kode markup 
ASP.NET, dan control untuk membuat user interface. 


e Kode di belakang file, yang merupakan sebuah module 
berisi kode program yang mengatur apa yang harus 
diproses di web form tersebut. 


Pembagian ini mirip dengan form Windows yang ada di pemrog- 
raman Visual Basic standar, yaitu ada komponen UI (user 
interface) dan kode di belakangnya. 


Di ASP.NET, kode untuk kedua komponen ini bisa disimpan di 
satu file .aspx, tapi umumnya form web disimpan di file aspx 
sementara kode di belakangnya disimpan di file .aspx.vb. 


Selain adanya halaman web, website juga bisa mengandung kode 
modul dengan ekstensi .vb. Kode html dengan ekstensi .htm, 
konfigurasi dengan kode web.config, global Web application 
information dengan kode Global.asax, cascading style sheet 
(CSS), file scripting (JavaScript), master page, dan komponen- 
komponen lainnya. 


Web Page Designer dan Solution Explorer bisa dipakai untuk 
mengubah tampilan komponen-komponen yang ada dengan 
cepat. 
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2.2 Web Page dan Windows Form 


Jadi apa bedanya antara web page dengan windows form. Yang 
jelas web page membutuhkan paradigma pemrograman yang 
berbeda dengan windows form. 


Jika Windows Forms menggunakan aplikasi Windows sebagai 
antarmuka utama, maka website menampilkan informasi ke user 
melalui halaman-halaman web yang ada dengan kode di 
belakangnya. Web page ini akan dilihat di browser dan dibuat 
menggunakan Web Page Designer. 


Seperti form Windows, sebuah web page bisa terdiri atas teks, 
gambar, button, listbox dan lain sebagainya yang dipakai untuk 
menampilkan informasi, input proses atau display output. Namun 
dasar dari kontrol bukanlah tab Common Controls di toolbox, tapi 
toolbox yang ada di Visual Web Developer Toolbox, termasuk di 
dalamnya ada Standard, Data, HTML, dan lain sebagainya. 


Tiap kontrol Visual web developer memiliki method, properties dan 
event yang unik. Walaupun ada persamaan antara kontrol-kontrol 
ini, namun ada yang berbeda. Misalnya DataGridView di Visual 
web developer diberi nama GridView dan punya properties dan 
method yang berbeda. 


22.1 Kontrol Server 


Beberapa kontrol di web page berjenis server control, artinya 
kontrol tersebut dijalankan di server. Kontrol server memiliki 
awalan “asp” di tag-nya. Adapun kontrol HTML yang terletak di 
tab HTML dari toolbox visual web developer adalah kontrol client. 
Artinya, program tersebut hanya berjalan di browser milik user. 


Dalam sebuah program, kemungkinan Anda memadukan antara 
kontrol klien dengan kontrol dari server, alias harus ada kombinasi 
antara keduanya. Semakin Anda berpengalaman dalam pemrog- 
raman web, nantinya Anda juga akan menggunakan pemrograman 
AJAX di Visual Studio. AJAX memungkinkan efisiensi dari aplikasi 
web dengan menambahkan elemen tambahan di web app Anda. 
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Kontrol tipe server ini akan lebih punya banyak fitur dibandingkan 
dengan kontrol HTMI. Kontrol di web ASP.NET kurang lebih 
fungsinya sama seperti kontrol di Windows Form. Beberapa di 
antaranya punya properti, method dan event yang sama, tapi 
beberapa di antaranya juga beda. 


Selain kontrol sederhana seperti button, textbox, dan label, ada 
juga kontrol seperti Chart, FileUpload, LoginView, dan 
ReguiredFieldValidator. Visual Basic 2010 memiliki beberapa 
kontrol baru di list. 


2.2.2 Kontrol HTML 


Kontrol HTML terdiri atas berbagai kontrol antarmuka (user 
interface) yang didukung oleh semua browser dan sesuai dengan 
standar HTML untuk mengatur antarmuka di halaman web standar. 


Yang termasuk kontrol HTML adalah button, text dan checkbox. 
Ketiganya termasuk di antara kontrol standar yang digunakan 
untuk mengatur informasi dari webpage dan bisa diatur secara 
penuh menggunakan kode HTML. 


Walaupun kontrol-kontrol ini mudah digunakan dan sederhana, 
namun kekurangannya adalah sulit mengatur kondisi dirinya, atau 
dengan kata lain data yang ada di dalam kontrol ini akan hilang 
jika webpage berpindah. Berikut ini beberapa tab kontrol HTML. 


CD Input (Button) 
C4 Input (Reset) 
@4 Input (Submit) 


abi “Input (Text) 
bi Input (File) 

















Gambar 2.2 Toolbox HTML 
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2.3 Membuat Program Web Pertama Kali 


Membuat program web di Visual Basic 2010 berbeda dengan 
membuat program Windows. Tapi sama seperti membuat program 
untuk Windows, program web Visual Basic ini tersimpan dalam 
sebuah project. 


1. Klik menu File. 
2. Kemudian klik menu New Web Site. 





File | Edit View Debug Team Data Tools Architecture Test 
Gl New Project... Ctel-N p' bah "et | 
@ New WebSite... Is Shift-Alt- N 

Lih New Team Project... 

4 New File... 

Hi Open Project... Ctrl0 

(CS Open Web Site... Shift-Alt-O 

kep Connect to Tearm Project... 

& 


Open File... 
Close 


Ctrl-S 





@ Save All Ctrl-Shift-S 
Export Template.. 


Carrera Cnntral . 


Gambar 2.3 Menu New Web Site untuk membuat website 


3. Menu di atas akan menjalankan Visual Web Developer, 
Anda pun siap untuk menggunakan Visual Studio guna 
membangun Web site. 


4. Muncul kotak dialog New Web Site seperti gambar berikut. 
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(NET Framework4 | Sortby: | Default 
Installed Templates 
3 AASP.NET Web Site Visual Basic 
Visual Basic 83 
Visual C£ 
MO) ASP.NET Empty Web Site Visual Basic 
Online Templates 
ve 
5 ASP.NET Dynamic Data Entitizs Web Site Visual Basic 
Vaj 
& ASP.NET Dynamic Data Ling to SOL Web Site Vicual Basic 
Yagg WCF Sevice Visual Basic 
Fe AASP.NET Reports Web Site Visual Basic 
“. ASP.NET Crystal Reports Web Site Visual Basic | 
Web location: File System "| UsertAM00N Documents Visual Studio 2010WebSiterWebSitePertamal - | |. Browse. | 
beta 












































Gambar 2.4 Jendela New web site 


Di kotak dialog di atas, Anda bisa memilih website atau 
template aplikasi. 


Selain itu pilih lokasi dari website (apakah di file sistem 
lokal, server HTTP, atau FTP). 


Pilih juga bahasa pemrograman yang hendak digunakan, 
apakah VB atau Visual C#. Kali ini gunakan VB. 


Tentukan target Net Framework yang ingin Anda buat 
untuk aplikasi web. Versi 4 adalah versi yang paling 
banyak fiturnya, tapi sering kali Anda perlu membuat 
program yang berjalan di platform sebelumnya. 


Di Dialog New Website, verifikasi bahwa VB sudah menjadi 
bahasa yang Anda inginkan. Dan ASP.NET website terpilih 
di Selected Template. 


. Di Web Location list, pastikan bahwa File System terpilih. 
. Isikan nama file yang Anda inginkan. 
. Di Visual web developer, file projek disimpan di depan. 


. Klik OK untuk menghasilkan solusi ini. 
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14. Nantinya Visual Studio akan me-load Visual Web 
Developer dan kemudian menciptakan sebuah halaman 
web Default.aspx yang menampilkan user interface untuk 
halaman web pertama. Dan di belakangnya ada kode 
Default.aspx.vb yang akan menyimpan kode untuk 
halaman web. 


15. Jika Anda tidak melihat file Default.aspx, coba buka 
Solution Explorer dan klik dua kali pada Default.aspx 
untuk membukanya. Ada tiga tampilan web di web, 
berbeda dengan ketika membuat aplikasi web. Anda bisa 
mengaturnya di bagian bawah. 

















Edit View Website Build Debug Team Data Format Table Tools Architecture Test Analyze Window Help 
dGa-dgs saja 2ja-e-A-Gg|ruaag cg oo “ISU A. 


Toolbox 
4 Standard 

Pointer 21 9 c.AwebSitePertama 
(3 AdRotator Ea Account 
HE Buletedlist MY ASP.NET APPLICATION 
Button 
gu 


Home About 5) Aboutaspx 


MainContent (Custom)Ln2l BI Default.aspx 


WELCOME TO ASP.NET! kl Globalasax 

ng UO) Site.master 

Tatakan i f 53 Web.config 
HiddenField To learn more about ASP.NET visit www.asp.net. 





Ja 


HyperLink 

« TI 
Image 

a a 

ImageButton (@ Design | split | & source 
ImageMap 
RR @9Erors || NOWamings | (D 0 Messages 
LinkButton 


ListBox 


Descrip.. File Line 


JOsEOkb 


Literal 
Localize 
MultiView 


Dos 


Panel 


38 Toolbox PEKAN PIA 3 solution. Oa 











Gambar 2.5 Tampilan jendela Visual Basic 2010 membuka halaman 
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web yang sedang dibuka 
16. Tidak seperti Windows Forms Designer, Web Page 
Designer memiliki tiga tampilan yang bisa Anda atur. 


17. Tab Design menampilkan bagaimana web page akan 
tampil di browser. 


Defaultaspx X 


MY ASP.NET APPLICATION 


MainContent (Custom)Lh2)... 











IWELCOME TO ASP.NET! 
ITo learn more about ASP.NET visit www.asp.net. 


You can also find documentation on ASP.NET at MSDN. 

















“| an 


& Desi | Split | Source | (aj kaspiContent2BodyContento|| ch2» 





























Gambar 2.6 Tampilan Design 





18. Di tab Source, Anda bisa melihat dan mengedit kode 
HTML dan markup ASP.NET yang digunakan untuk me- 
nampilkan halaman web di browser. Jika Anda pernah 
menggunakan Dreamweaver atau Microsoft Expression 
Web, Anda pasti familiar dengan metode penampilan 


source ini. 





Gient Objects & Events 5L Wotvents) 





2 Title-"Home Page" Language-"VB" MasterPpagerile-”x/Site.Master” AutoEventWireup-”false” 
#File-"Default.aspx.vb" Inherits-" Default" & 


1tent IO-"HeaderContent" runat-"server” ContentPlaceHolderID-”HeadContent” 
ontent» 
Ehtent ID-"BodyContent" runat-"server” ContentPlaceHolderID-"MainContent”» 


& 
| kelcome to ASP.NET! 
|» 


To learn more about ASP.NET visit ca href-"http://www.asp.net” title-"ASP.NET Websiteww.asp.netc/ab. 
bs 


You can also find «a href-"http://go.microsoft.com/fwlink/?LinkID-1523688amp:clcid-0x409" 
title-"MSDN ASP.NET Docs”»documentation on ASP.NET at MSDNX/a». 





pntent» 





10076 - 4 k m 
G Design | 0 Split | Sejyce | fallkespiContent#8odyContent» 

















Gambar 2.7 Tab Source 


z 
E3 
8 





19. Adapun tampilan Split merupakan kombinasi keduanya, di 
tampilan split, Anda bisa melihat bagian kode Source dan 


bagian Design. 
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Default.aspx X 





(No Events) 
: -FHome Page” Language-"VS" Masterpagerile-"n/Site.Master” AutoEventwircup-" false” 
:File-"Default.aspx.wb" Inherits-" Default" X5 





1tent ID-"HeaderContent” runat-"server” ContentPlaceHolderID-"HeadContent"» 
»ntent» 
Entent ID-"BodyContent” runat-"server” ContentPlaceolderID-"MainContent” 


Welcome to ASP.NET! 


MY ASP.NET APPLICATION 


Home About 


MainContent(Custom),Lh2l. 
paati CAME TN ASD NETI 
« 











TT 

















& Design | Spirit | Source | fa) kaspiContent#BodyContente| ch2» 





Gambar 2.8 Tampilan split dan tampilan Design 


20. Ada perbedaan lain antara Windows Forms Designer dan 
Web Page Designer. Di Toolbox, Anda bisa melihat bebe- 
rapa kontrol yang hanya muncul di web programming dan 
tidak ada di form designer. 























Toolbox "41x 
4 Standard 25 
It Pointer Is Fr 
(3 AdRotator 
IS BulletedList 
Gb) Button 
(EF Calendar 
| CheckBox 
85  CheckBoxlist 
EF DropDownlist 
tt) FileUpload E 
sb HiddenField 
AA Hyperlink 
kl Image 
G3) ImageButton 
II ImageMap 
A Label 
G5) LinkButton 
F8 ListBox 4 
Pi Literal 
MB Localize 
IEj  MultiView 
HJ Panel 
(RI PlaceHolder 
(@  RadioButton 
35  RadioButtonlist 
fe) Substitution 
KI Table 
ebi)” TextBox - 








Gambar 2.9 Toolbox dari Visual web designer 


21. Begitu pula solution explorer menampilkan list yang ber- 
beda dari file-file project dibandingkan saat menggunakan 
Form designer. Ada perbedaan. Perhatikan Default.aspx di 
Solution Explorer, ini adalah antarmuka dari web page 
yang masih aktif. Di bagian bawahnya ada file bernama 
Default.aspx.vb. Ini adalah bagian yang menampung kode. 


22. 


Ada file konfigurasi yang bernama web.config dan file 


master page yang dinamai Site.master juga ditampilkan. 


Solution Explorer "IX 


adala 
GP CA.AWebSitePertamal 

Cs Account 

j App. Data 

Cs Scripts 

Cg Styles 

EEJ About.aspx 
4 (ES Defa-aspx 

&J Default.aspx.vb 

ig Global.asax 
(7 Site.master 
Bb Web.config 








Gambar 2.10 Solution explorer 


23. Ketika Anda menutup website dan mengklik Exit, maka 
Anda harus membukanya dengan klik File »— Open Website 
dan bukan Open Project. 


ba WebSitePertama - Microsoft Visual Studio MN 





File 


LagacssE 


Edit View Website Buiid Debug Team Data 
Ctel-N 
Shift-Alt-N 


New Project... 
New Web Site... R 
New Team Project... 

New File... 

Open Praject... 

Open.Web Site... & 
Connect to Team Project... 


CtetO ) 
Shift Alt: O 


Open File... 
Add , 


Sa 


Close 


Gambar 2.11 Menu untuk Open Website 
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24. 


25. 


26. 


Untuk menjalankan web ini, coba tekan F5 di keyboard, 
maka tampilan web akan dimunculkan di browser. 


Muncul kotak konfirmasi apakah Anda akan memodifikasi 
Web.config, pilih Modify the web.config kemudian klik OK 
untuk memulainya. 


Denga No Entin “NN 





The page cannot be run in debug mode because debugging is not enabled in the Web.config file. 
What would you like to do? 


@ Modify the Web.config file to enable debugging. 


(AN  Debugging should be disabled in the Web.config file before deploying the Web 
siteto a production environment. 


(O Run without debugging. (Eguivalent to Ctrl- F5) 























Gambar 2.12 Klik OK untuk memulai debug 


Hasilnya, terlihat tampilan website. Jika Anda menutup 
tampilan website ini, belum tentu tampilan debug berakhir. 
Mengakhiri tampilan Debug harus dengan klik tombol Stop 
untuk debug. 


5 (htn/Morahon206/Mes5teroma/Ddutas 


sion -H... leh Most Visted EX httpsi//ibankkikbca.c.. (GI htip/Pwwwgames.co.. | Pttps/facebook.comv IBI hips/iponaltelkoms... W Listof resand opens.. |) tik POmerpoint D The Psychology of He, 





My ASP.NET AppuicATioN 


Home | About 


WELCOME TO ASP.NET! 


out ASP.NET Vist umwatp.net 


documentatian on ASP.NET at MSDN, 























Gambar 2.13 Tampilan halaman website 


27. Untuk menghentikan debug, klik Stop Debugging seperti 
gambar berikut ini. 








Gambar 2.14 Tombol untuk Stop Debugging 


2.4 Mengenal dan Menggunakan IDE Visual 
Web Developer 


Tidak seperti form Windows, web page bisa langsung ditambahi 
teks tanpa harus memasukkan objek seperti label. Cara mema- 
sukkannya juga mudah, yaitu langsung mengetikkannya di Web 
page designer. 


Jika membukanya di Source view, maka teks akan ditampilkan di 
antara tag HTML dan ASP.NET. 


Di tampilan Design view, teks dapat dimasukkan seperti saat 
menulis di word processor. Yaitu top down dari atas ke bawah. 
Berikut ini tutorial pertama untuk mengedit halaman web 
default.aspx dan sedikit mengisikan kode di dalam dokumen: 


1. Klik bagian “Welcome to ASP.NET” lalu ganti dengan 
tulisan “Program Pertamaku”. Penggantian langsung dila- 
kukan dengan mengetikkannya. 
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MY ASP.NET APPLICATION 


IPROGRAM PERTAMAKU 


O learn more about ASP.NET visit www.asp.net. 


ou can also find documentation on ASP.NET at MSDN. 








Gambar 2.15 Mengganti teks di halaman web Default.aspx 


2. Berikutnya ganti teks di bawahnya dengan tulisan “Silakan 
isi data berikut ini”. 


Default.aspx” X 


MY ASP.NET APPLICATION 


PROGRAM PERTAMAKU 
Ip. 








Gambar 2.16 Pengisian teks untuk mengisikan data 
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3. Jika Anda lihat tampilan Source, maka muncul kode 
berikut (kode mungkin bisa berbeda sedikit karena parsing 
dari Visual Basic 2010): 

ch2» 

Program Pertamakusx/h2» 
«ps 

Silakan isikan data berikut ini: 
«/p3 


4. Kemudian masukkan label dengan klik pada Label di 
toolbox dan seret/drag ke bawah teks. Tapi sebenarnya 
Anda tetap bisa mengetikkan teks tanpa label, hanya saja 
penulis hendak mendemokan penggunaan label. 

Toolbox "1 Xx oetauit.aspo” »x. MEN 


4 Standard - 








Pointer 
AdRotator 
BulletedList MY ASP.NET APPLICATII 
Button 
Calendar 
CheckBox 
CheckBoxlist 














MainContent (Custom)| 


PROGRAM PERTAMAKU 








DropDownlist 
FileUpload 
HiddenField 
HyperLink 


m 






Silakan isikan data berikut ini: 





Image 
ImageButton 
ImageMap 
Label 
LinkButton 
ListBox 















“Ii 











Literal 


P9OrbOkbe Id OAO hb” 


O Split & Source | «asp:Conten 

















(8 Design 











Loralme 


Gambar 2.17 Memasukkan label ke dalam webpage 


5. Ketika label masuk, objek label diidentifikasikan dengan 
adanya tulisan asp:label#nama label. 











MainContent (Custom 


PROGRAM PERTAMAKU 


Silakan isikan data berikut ini: 


asp:label#Label| 


Gambar 2.18 Nama label 
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6. Klik label, dan ganti nama/id-nya di bagian ID dan teksnya 
menjadi “Nama” di bagian Text. 


Properties "IX 
Ibi1 System.Web.UI.WebControls.Label " 
“NO 

(Expressions) 

@D) Ibil 

Accesskey 

AssociatedContro 

BackColor 

BorderColor 

BorderStyle NotSet 

BorderWidth 

ClientIDMode — Inherit 

CssClass 

Enabled True 

EnableTheming True 

EnableViewState True 
» Font 





ForeColor 
Height 
SkinID 
Tablndex 0 
Nama 1 
ToolTip 
ViewStateMode Inherit 
Visible True 
Width 








Text 
The text to be shown forthe Label. 


(SP Properties Modal mula 





Gambar 2.19 Penggantian nama dan teks 


7. Hasilnya, label akan berganti tulisannya menjadi Nama. 





Tootbox "2 xTocoutaspe « TN 


Image 3 





ImageButton 
ImageMap 
Label MY ASP.NET APPLICATION 
LinkButton 
ListBox 
Literal 







MainContent (Custom), 


PROGRAM PERTAMAKU 





Localize 
MultiView 


PSO BOL 





Panel 
PlaceHolder 
RadioButton 
RadioButtonlist 
Substitution 
Table 

TetBox 

View 

Wizard 

Xml 








Silakan isikan data berikut ini: 











JAE: OR 


£ 












m 


Ii) «aspiContent#BodyContent» 











sol 














& Design | Split Source | 











» Nata 


Gambar 2.20 Label Ibl1 berganti tulisan 


8. Kemudian masukkan objek textbox. Maka muncul objek 
textbox. 








MY ASP.NET APPLICATION 


PROGRAM PERTAMAKU 









Silakan isikan data berikut ini: 


Gambar 2.21 Objek textbox dimasukkan ke dalam halaman web 


9. Ganti ID dari textbox menjadi txt1 dan biarkan Text-nya 
menjadi kosong. 





Properties "1x 
txt1 System.Web.UI.WebControls.TextBox —- 
C2 laa 





(Expressions) . 


TEA «| 
AccessKey 
AutoCompleteTyj None 
AutoPostBack False 
BackColor 

BorderColor 

BorderStyle NotSet 
BorderWidth 
CausesValidation False 
ClientIDMode Inherit 


" 


Columns 0 
CssClass 
Enabled True 








Gambar 2.22 Mengganti textbox 


10. Dengan cara yang sama, masukkan label 2 dan textbox 2 
dan ganti nama textbox 2 menjadi txt2. 
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MY ASP.NET APPLICATION 






PROGRAM PERTAMAKU 


Silakan isikan data berikut ini: 














TI 
O Split Gl Source | IKI «asp:Content#BodyContent» (sr 











Gambar 2.23 Memasukkan label dengan text “Alamat” dan textbox 2 


11. Jika dilihat source-nya, kodenya kurang lebih seperti 
berikut (tag HTML-nya mungkin sedikit berbeda): 


«ps 
sasp:Label ID-"1lbl1" runat-"server" 
Text-"Nama" »«/asp: Label» 
&nbsp: : 
sasp:TextBox ID-"txtl" runat-"server" »«/asp: TextBox» 
«/p3 
«ps 
sasp:Label ID-"1b12" runat-"server" 
Text-"Alamat"»x«/asp: Label» 


sasp:TextBox ID-"txt2" runat-"server"»«/asp: TextBox» 
«/p3 


12. Di bawahnya masukkan button dengan men-drag button 
dari toolbox. 
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Toolbox "1 XD Defaultaspx” Xx 
4 Standard . 
Ik Pointer 
(4 AdRotator 
BE Buldedtist MY ASP.NET APPLICATIO 
(-b) Button 
BE Calendar Home About 
“| CheckBox ————— 
8-  CheckBoxlist MainContent (Custom) 
F8 DropDownlist PROGRAM PERTAMAKU 
t) FileUpload 8 
SEP HiddenField Silakan isikan data berikut ini: 
A  Hyperlink 
kl Image INama : 
@ ImageButton 
Isl ImageMap Alamat: 
A Label In » 
LinkButton — : 











Gambar 2.24 Men-drag button ke halaman web 


13. Button yang sudah dimasukkan adalah button yang 
dijalankan dari sisi server, sehingga tag-nya adalah tag 
ASP asp:button. 








MainContent (Custom 


PROGRAM PERTAMAKU 





Silakan isikan data berikut ini: 





Gambar 2.25 Button dimasukkan ke dalam halaman web 


14. Ganti id dari button menjadi btn1l, dan ganti teksnya 
menjadi “Proses”. 
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Properties "1x 
Button1 System.Web.UILWebControls.Buttor v 
“la ga 


(Expressions) 






| 
JT 


btn1 
AccessKey 
BackColor 
BorderColor 
BorderStyle NotSet 
BorderWidth 


CausesValidation True 
ClientIDMode — Inherit 
CommandArgum 


m 


CommandName 
CssClass 
Enabled True 
EnableTheming True 
EnableViewState True 

» Font 

ForeColor 
Height 
OnClientClick 
PostBackUri 
SkinID 
TabIndex 0 
Tet Proses 
ToolTip 
HesSuhmitReharsis Tria 

4D) 

Programmatic name of the control. 





Gambar 2.26 Mengganti teks button menjadi Proses dan Idnya 
menjadi btn 


15. Coba jalankan program dengan menekan F5 di keyboard, 
maka terlihat antarmuka sudah selesai. Tapi jika Anda klik 
button belum ada yang terjadi karena memang belum ada 
kode yang ditambahkan di sini. 


My ASP.NET AppuicAaTioN 


Home About 





PROGRAM PERTAMAKU 
Silakan isikan data berikut ini 
Nama 


Alamat : || 


Gambar 2.27 User interface sudah terbuat dengan 2 label, 2 textbox 
dan 1 button. 
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16. Klik dua kali pada button Proses kemudian isikan kode 
berikut: 


Protected Sub btnl Click(Byval sender As Object, Byval e 
As System.EventaArgs) Handles btnl.Click 








MsgBox (" Nama Anda " #4 Me.txtl.Text #t ", dan alamat 
Anda di " # Me.txt2.Text) 
End Sub 


17. Kemudian jalankan program, isikan kotak teks Nama dan 
Alamat, dan klik Proses. 


My ASP.NET AppuicatioNn 


Home About 





PROGRAM PERTAMAKU 
Silakan isikan data berikut ini: 
Nama : Joni 


Alamat : Jl Darmawangsa 2939A 





Gambar 2.28 Klik pada Proses 


18. Maka muncul kotak pesan yang berupa message box 
seperti berikut. 





Nama Anda Joni, dan alamat Anda di Jl Darmawangsa 2939A 











Gambar 2.29 Kotak pesan yang di-generate oleh kode 
19. Dari contoh kode di atas, Anda mengerti ilustrasi bagai- 


mana langkah-langkah melakukan pemrograman web di 
Visual Basic 2010. 
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2.5 Membuka Website 


Membuka website bukan dengan File » New Project, tapi dengan 
menu Open Web site. Berikut ini detail caranya: 


1. Klik File » Open Web Site. 
20 Microsoft Visual Studio. NN 


| File | Edit View Debug Team Data Tools Architecture Test 





Connect to Teamg Project... 


Gl New Project... Ctr-N ARA Kg 
&w New Web Site... Shift-Alt-N 

Lih New Team Project... 

LI NewFile... 

a Open Project... CtrtO 

£5 OpenWebSite... DN Shiftx-Alt:O 

- 

& 


Open File... 


Gambar 2.30 Menu untuk membuka website 


2. Muncul jendela File System, Anda bisa menentukan 
apakah ingin membuka file dari sistem file (file system), 
dari server IIS lokal (Local IIS), atau situs FTP (FTP site). 
Klik Open. 














1 File System 
"Tj 
Select the folder you want to open. ax 
Visual Studio 2008 - 
ES 4 IX Visual Studio 2010 
| Code Snippets 
Local IS Projects 
Settings 
w StartPages 
sei Templates 
FTP Site Visualizers 1 
4 Ji WebSites 
w. WebSitel | 
a | WebSitePertama 3 
Remote Site 
Account 
App. Data 
rei Scripts A 
Source | Styles 
Control ID My Music 
Ej My Pictures 
Hi My Videos & 
Folder: 
CAUsersMAXIOON Documents Visual Studio 20101WebSitesWebSitePertama 


























Gambar 2.31 Jendela File System 
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3. Maka file web akan langsung dibuka, seluruh file projek 
web akan terlihat di Solution Explorer. 





























Gambar 2.32 Aplikasi web sudah dibuka 


Dengan Visual Web Developer, Anda bisa mengembangkan satu 
halaman saja menjadi banyak dengan menambahkan informasi 
dan resource tambahan seperti HTML, XML, file teks, database, 
web service, login session, sitemap dan lainnya. 


Ketika hendak menambahkan halaman web, Anda dapat mela- 
kukan beberapa hal berikut. 


Anda bisa membuat web page baru menggunakan HTML 
page template atau Web Form template. Anda bisa 
memilih template ini menggunakan menu Add New Item. 
Setelah halaman terbuat, Anda bisa menambahkan teks 
dan objek ke web page menggunakan fasilitas Web Page 
Designer. 


Anda bisa menambahkan web page dari webpage yang 
sudah dibuat menggunakan Add Existing Item. Kemudian 
Anda bisa kostumisasi halaman menggunakan Web Page 
Designer. Anda bisa memakai metode ini jika sudah 
membuat tool di sebuah website kemudian ingin menam- 
bahkan file yang sudah jadi ke dalam projek Anda. 
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Anda bisa menggunakan web page yang sudah ada yang 
merupakan bagian dari template website yang digunakan. 
Misalnya About dan Login yang bisa diedit sedikit kemu- 
dian digunakan. 


